<!--
 * @Author: ZhaoZhiqi
 * @Date: 2024-07-01 17:54:24
 * @LastEditors: ZhaoZhiqi
 * @LastEditTime: 2025-01-03 18:41:18
 * @Description: 首页
 * @FilePath: \charging-mini\充电项目\pages\index.vue
-->
<template>
    <div class="container">
        <HeaderBar>
            <template slot="titleBar">
                <div class="header">苏惠充</div>
            </template>
        </HeaderBar>
        <view class="uni-margin-wrap">
            <swiper class="swiper" circular>
                <swiper-item v-for="item in swiperImgs" :key="item">
                    <view class="swiper-item" :style="{ backgroundImage: `url(${item})` }"></view>
                </swiper-item>
            </swiper>
        </view>

        <div class="card">
            <img class="car" :src="imgs.car" alt="" />
            <div class="scan" @click="openScan">
                <img class="icon" src="../src/assets/imgs/scan-icon.png" alt="" />
                <div class="text">扫码充电</div>
            </div>
            <div class="grids">
                <div class="grid" @click="link2('/pages/site_list')">
                    <img style="width: 40rpx; height: 40rpx; margin: 0 28rpx" src="../src/assets/imgs/search-icon.png" alt="" />
                    <div>站点查询</div>
                </div>
                <div class="grid" @click="link('/pages/order')">
                    <img src="../src/assets/imgs/order-icon.png" alt="" />
                    <div>我的订单</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import HeaderBar from "../src/components/HeaderBar.vue";
import Tabs from "../src/components/Tabs.vue";
const app = getApp();
export default {
    components: {
        HeaderBar,
        Tabs,
    },
    data() {
        return {
            imgs: app.globalData.imgs,
            index: 0,
            show: false,
            car: "https://peanut-oss.wemogu.net/img/20240926/a2ed573456a168fd9727b2c465866ed7.png",

            swiperImgs: ["https://charging-mini.oss-cn-hangzhou.aliyuncs.com/charging-mini/test/user/1852264564548263937/1732020359955-3oV4M4ndo3qJ48bcb313db1400fd65cafc6bd801d24b.jpg"],
        };
    },
    onShareAppMessage() {},
    onLoad() {
        // 非手动退出的情况，进入应用后静默登录
        if (!uni.getStorageSync("isLogout")) {
            uni.showLoading({
                title: "加载中",
            });
            app.login()
                .then((res) => {
                    uni.hideLoading();
                })
                .catch((err) => {
                    uni.hideLoading();
                });
        }
    },
    mounted() {
        // uni.showToast({
        //     title: "标题",
        //     duration: 2000,
        // });
    },
    onReady() {},
    methods: {
        link(url) {
            uni.switchTab({
                url: url,
            });
        },
        link2(url) {
            uni.navigateTo({
                url: url,
            });
        },
        getUrlParams(url) {
            const paramsRegex = /[?&]+([^=&]+)=([^&]*)/gi;
            const params = {};
            let match;
            while ((match = paramsRegex.exec(url))) {
                params[match[1]] = match[2];
            }
            return params;
        },
        openScan() {
            this.userInfo = uni.getStorageSync("userInfo") || {};
            // if (!this.userInfo.phone) {
            //     uni.showModal({
            //         title: "用户未登录",
            //         content: "扫码充电需要绑定手机号，现在去绑定手机吗？",
            //         confirmText: "去绑定",
            //         success: (res) => {
            //             if (res.confirm) {
            //                 uni.navigateTo({
            //                     url: "/pages/login",
            //                 });
            //             } else if (res.cancel) {
            //                 console.log("用户点击取消");
            //             }
            //         },
            //     });
            //     return false;
            // }

            uni.scanCode({
                success: (res) => {
                    let url = res.result;
                    console.log(url);
                    let { stationSerialNumPort, port } = this.getUrlParams(url);
                    if (!stationSerialNumPort) {
                        uni.showToast({
                            title: `无效链接`,
                            icon: "none",
                        });
                        return false;
                    }
                    uni.navigateTo({
                        url: `/pages/ports?stationSerialNumPort=${stationSerialNumPort}&port=${port}`,
                    });
                },
            });
        },
    },
};
</script>
<style scoped lang="less">
.container {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: #f6f6f6;
    box-sizing: border-box;
    background-image: url("https://peanut-oss.wemogu.net/img/20240926/6edbeb844563cb5667bf7d916e14ed46.png");
    background-repeat: no-repeat;
    background-position: top;
    background-size: cover;

    .header {
        font-size: 38rpx;
        line-height: 1;
        font-weight: bold;
        margin-left: 28rpx;
        color: #333;
    }

    .title {
        width: 160rpx;
        height: 52rpx;
        margin-left: 20rpx;
        display: block;
    }

    .card {
        width: 694rpx;
        margin: 0 uto;
        position: absolute;
        bottom: 30rpx;
        left: 28rpx;
        padding-top: 100rpx;
        padding-bottom: 50rpx;
        background-color: #fff;
        border-top-left-radius: 60rpx;
        border-top-right-radius: 60rpx;
        border-radius: 60rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .car {
            width: 440rpx;
            height: 360rpx;
            position: absolute;
            top: -260rpx;
            right: 0;
        }
        .scan {
            flex: none;
            width: 300rpx;
            height: 300rpx;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background-repeat: no-repeat;
            background-position: top;
            background-size: contain;
            background-image: url("../src/assets/imgs/scan-bg.png");
            margin-bottom: 30rpx;
            .icon {
                width: 80rpx;
                height: 80rpx;
                margin-top: -50rpx;
                margin-bottom: 10rpx;
            }
            .text {
                color: #fff;
            }
        }
        .grids {
            display: flex;
            .grid {
                width: 280rpx;
                height: 108rpx;
                margin: 0 30rpx;
                background: linear-gradient(136.39deg, #8bdab0 0%, #08bfa8 100%);
                border-radius: 28rpx;
                color: #fff;
                display: flex;
                align-items: center;
                font-size: 28rpx;
                img {
                    width: 48rpx;
                    height: 48rpx;
                    margin-left: 24rpx;
                    margin-right: 24rpx;
                }
            }
        }
    }
}
.uni-margin-wrap {
    width: 690rpx;
    margin: 20rpx auto 0;
    border-radius: 20rpx;
    position: relative;
    z-index: 10;
}
.swiper {
    height: 350rpx;
    border-radius: 20rpx;
}
.swiper-item {
    display: block;
    height: 350rpx;
    line-height: 300rpx;
    text-align: center;
    border-radius: 20rpx;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.swiper-list {
    margin-top: 40rpx;
    margin-bottom: 0;
}
.uni-common-mt {
    margin-top: 60rpx;
    position: relative;
}
.info {
    position: absolute;
    right: 20rpx;
}
.uni-padding-wrap {
    width: 550rpx;
    padding: 0 100rpx;
}
</style>
